<script lang="ts" setup></script>

<template>
  <div class="network-wrap">
    <div class="left">
      <div class="network-type">
        <div class="left-item">网络类型</div>
        <div class="left-item">以太网</div>
      </div>
      <div class="network">
        <div class="network-item">
          <div class="network-item-label">LAN1</div>
          <div class="network-item-value" style="margin-right: 25px">
            <svg-icon class="item-icon" name="item-upArrow"></svg-icon>
            <span>68Mbps</span>
          </div>
          <div class="network-item-value" style="margin-right: 40px">
            <svg-icon class="item-icon" name="item-downArrow"></svg-icon>
            <span>68Mbps</span>
          </div>
          <div class="network-item-echarts"></div>
        </div>
        <div class="network-item">
          <div class="network-item-label">LAN2</div>
          <div class="network-item-value" style="margin-right: 25px">
            <svg-icon class="item-icon" name="item-upArrow"></svg-icon>
            <span>68Mbps</span>
          </div>
          <div class="network-item-value" style="margin-right: 40px">
            <svg-icon class="item-icon" name="item-downArrow"></svg-icon>
            <span>68Mbps</span>
          </div>
          <div class="network-item-echarts"></div>
        </div>
      </div>
    </div>
    <div class="right">
      <img class="right-bg" src="@/assets/images/working-top-bg.png" alt="" />
      <svg-icon class="item-icon" name="timeIcon"></svg-icon>
      <span>系统正常运行时间</span>
      <span class="time">00:23:32:45</span>
    </div>
  </div>
</template>

<style lang="less" scoped>
.network-wrap {
  width: 100%;
  display: flex;
  .left {
    width: 100%;
    padding: 6px 20px 6px 0;
    background-color: #fff;
    border-radius: 10px;
    display: flex;

    .network-type {
      width: 122px;
      height: 68px;
      border-right: 1px solid #c6ced9;
      color: #333;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .network {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 16px;
      .network-item {
        height: 16px;
        display: flex;
        align-items: center;
        padding-left: 40px;
        .network-item-label {
          margin-right: 22px;
        }
        .network-item-value {
          display: flex;
          align-items: center;
        }
        .network-item-echarts {
          flex: 1;
          height: 16px;
          background-color: #f5f8ff;
        }
      }
    }
  }
  .right {
    width: 346px;
    margin-left: 20px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .time {
      margin-left: 24px;
      color: #4ac99b;
    }
    .right-bg {
      width: 100%;
      height: 30px;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}
</style>
